<template>
  <div>
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
          <el-form-item prop="deptNo" label="组织">
            <SearchSelectPicker
              url="/call-center/api/v1/departmentInfo/page"
              placeholder="请选择组织"
              lable-name="deptName"
              value-name="deptNo"
              method="post"
              :value.sync="formData.deptNo"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="groupNo" label="业务组">
            <SearchSelectPicker
              url="/call-center/api/v1/businessGroup/page"
              placeholder="请选择业务组"
              lable-name="groupName"
              value-name="groupNo"
              method="post"
              :value.sync="formData.groupNo"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="accountNo" label="坐席">
            <StaffSearch v-model="formData.accountNo" placeholder="请选择坐席" clearable></StaffSearch>
          </el-form-item>
          <el-form-item prop="operateType" label="操作类型">
            <SelectForDict :code.sync="formData.operateType" dict-type-code="CALL_OPERATION_TYPE" placeholder="请选择操作类型" clearable filterable></SelectForDict>
          </el-form-item>
          <el-form-item prop="skillName" label="技能队列">
            <el-select v-model="formData.skillName" filterable clearable placeholder="请选择技能队列">
              <el-option
                v-for="item in skillGroupOption"
                :key="item.id"
                :label="item.skillName"
                :value="item.skillName"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="createTime" label="操作时间" :span="12">
            <el-date-picker
              v-model="formData.createTime"
              opt
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd HH:mm"
              value-format="yyyy-MM-dd HH:mm"
              placeholder="请选择操作起始日期"
              operator=">"
              :limite="new Date()"
            />
          </el-form-item>
          <el-form-item :span="24">
            <div class="button-container" style="padding-top:0">
              <Button @click="resetForm">重置</Button>
              <Button type="primary" enter @click="queryHandle">查询</Button>
              <ExportPane :table-config="tableConfig" :data-source="selectionList" :query-data-fun="queryHandle" filename="话务操作报表" extension="xls">导出</ExportPane>
            </div>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="table" no-request :other-filters="otherFilters" :table-config="tableConfig" :other-raw="otherRaw" @selection-change="selectionChange">
        <el-table-column slot="before" type="selection" width="50" align="center" />
      </table-box>
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import SelectForDict from '@/components/SelectForDict'
import StaffSearch from '@/components/StaffSearch'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import ExportPane from '@/components/ExportPane'
import { filtersRaw } from '@/utils'
import { getSkillGroup } from '@/api/skillGroup'
export default {
  name: 'TelOperator',
  components: {
    ContentWrap,
    FormContainer,
    SelectForDict,
    StaffSearch,
    SearchSelectPicker,
    ExportPane
  },
  data() {
    const validateOperatorDate = (r, v, c) => {
      if (!v || v.length !== 2) {
        c(new Error('请选择操作时间'))
        return
      }
      const start = v[0] instanceof Date ? v[0] : new Date(v[0])
      const end = v[1] instanceof Date ? v[1] : new Date(v[1])
      if (end.getTime() - start.getTime() > 30 * 24 * 60 * 60 * 1000) {
        c(new Error('时间跨度不能超过一个月'))
      } else {
        c()
      }
    }
    return {
      skillGroupOption: [],
      formData: {
        deptNo: '',
        groupNo: '',
        accountNo: '',
        operateType: '',
        skillName: '',
        createTime: []
      },
      formRules: {
        deptNo: [],
        groupNo: [],
        accountNo: [],
        operateType: [],
        createTime: [
          { required: true, type: 'date', validator: validateOperatorDate, trigger: 'change' }
        ]
      },
      selectionList: [],
      otherFilters: [],
      otherRaw: {},
      tableConfig: {
        interfacePath: '/call-center/api/v1/callOperateLog/seat/page',
        pageFlag: true,
        hideFuncBar: true,
        sort: 'createTime',
        setting: [
          {
            prop: 'index',
            label: '序号',
            width: 80,
            align: 'center',
            formatData: (val) => {
              return val.keyIndex + 1
            }
          },
          {
            prop: 'deptName',
            label: '组织',
            minWidth: 120
          },
          {
            prop: 'groupName',
            label: '业务组',
            minWidth: 100
          },
          {
            prop: 'staffName',
            label: '坐席',
            formatData: v => {
              return `${v.staffName}(${v.accountNo})`
            },
            minWidth: 120
          },
          {
            prop: 'operateType',
            label: '操作类型',
            propEnum: {
              appCode: 'call-center',
              domainCode: 'marketing',
              dictTypeCode: 'CALL_OPERATION_TYPE'
            },
            minWidth: 120
          },
          {
            prop: 'skillName',
            label: '技能队列',
            minWidth: 100
          },
          {
            prop: 'extensionNumber',
            label: '分机号',
            minWidth: 100
          },
          {
            prop: 'createTime',
            label: '操作时间',
            minWidth: 140
          },
          {
            prop: 'remark',
            label: '操作备注',
            minWidth: 160
          }
        ]
      }
    }
  },
  created() {
    this.resetOperateDate()
    this.initSkillGroupInfo()
  },
  methods: {
    resetOperateDate() {
      const dateTime = new Date()
      this.$set(this.formData, 'createTime', [new Date((dateTime.getTime() - 24 * 60 * 60 * 1000)), dateTime])
    },
    resetForm() {
      this.$refs.form.resetFields()
      this.resetOperateDate()
    },
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const otherFilters = []
        const otherRaw = {}
        const equal = ['deptNo', 'groupNo', 'accountNo', 'operateType', 'skillName']
        const inner = []
        for (const key of Object.keys(this.formData)) {
          let v = this.formData[key]
          if (v === '' || v === undefined || v === null || (v instanceof Array && v.length === 0)) {
            continue
          }
          if (key === 'createTime') {
            otherFilters.push(filtersRaw(key, v[0], '>='))
            otherFilters.push(filtersRaw(key, v[1], '<='))
            continue
          }
          if (equal.includes(key)) {
            otherFilters.push(filtersRaw(key, v, '='))
          } else if (inner.includes(key)) {
            if (v instanceof Array) {
              v = `[${v.join(',')}]`
            } else {
              v = `[${v}]`
            }
            otherFilters.push(filtersRaw(key, v, 'in'))
          } else {
            otherFilters.push(filtersRaw(key, v, 'like'))
          }
        }
        this.otherFilters = otherFilters
        this.otherRaw = otherRaw
        if (type === 'export') {
          return otherFilters
        } else {
          this.refreshTable()
        }
      })
    },
    // 选择数据
    selectionChange(v) {
      this.selectionList = v
    },
    refreshTable(page) {
      this.$nextTick(() => {
        this.$refs.table.initTableData(page)
      })
    },
    initSkillGroupInfo() {
      getSkillGroup().then(res => {
        if (res.success === 1) {
          this.skillGroupOption = res.data
        }
      })
    }
  }
}
</script>
<style lang="scss" module>

</style>
